<template>
  <div class="main-container">
    <img id="user_logo" src="../assets/user_2.png">
    <div class="text-container">
      <span id="phone">180****1984</span><br>
      <span id="gesture_pwd">请输入你的手势密码</span>
    </div>
  </div>

  <div class="page-container">
    <div id="container" ref="container" style="width: 300px; height: 300px;"></div>
  </div>

  <van-dropdown-menu direction="up">
    <van-dropdown-item @click="to_go" v-model="value1" :options="option1" />
  </van-dropdown-menu>

</template>

<script setup lang="ts">
import GestureUnlockRenderer, { Anchor } from 'fly-gesture-unlock';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 定义额外状态
type ExtraStatus = never;

const container = ref();
const gestureUnlockRenderer = ref<GestureUnlockRenderer<ExtraStatus>>();

const value1 = ref(0);

const option1 =
  [
    { 'text': '手势解锁', 'value': 0 },
    { 'text': '指纹解锁', 'value': 1 },
    { 'text': '使用其他账号登录', 'value': 2 },
    { 'text': '取消', 'value': 3 }
  ]

function to_go() {
  if (value1.value == 0) {
    router.push('/gesture')
  }
  else if (value1.value == 2) {
    router.push('/login')
  }
  else if (value1.value == 3) {
    router.push('/gesture')
  }
}





onMounted(() => {
  // 借助提供的辅助函数生成锚点
  const anchorDefines = GestureUnlockRenderer.AnchorMatrixFactory({
    canvasSize: { width: container.value.clientWidth, height: container.value.clientHeight },
    padding: 35,
    matrix: { row: 3, column: 3 },
    anchor: { anchorCircleRadius: 30, centerCircleRadius: 10 },
  });

  gestureUnlockRenderer.value = new GestureUnlockRenderer<ExtraStatus>({
    container: container.value,
    anchorDefines,

    anchorStatusStyles: {
      'not-selected': {
        // 锚点圆的边框宽、边框颜色、填充颜色
        anchorCircleBorderWidth: 1,
        anchorCircleBorderColor: '#3ea1e5',
      },
      'selected': {
        // 锚点圆的边框宽、边框颜色、填充颜色
        anchorCircleBorderWidth: 1.5,
        anchorCircleBorderColor: '#128ce8',
        anchorCircleFillColor: '#ffffff',

        // 中心圆的边框宽、边框颜色、填充颜色
        centerCircleFillColor: '#128ce8'
      },
    },
    lineStatusStyles: {
      'normal': {
        lineColor: '#128ce8',
        lineWidth: 1,
      },
    },
    events: {
      'end': gestureEnd,
    },
  });
});

const gestureEnd = (selectedAnchors: Anchor<ExtraStatus>[]) => {
  const anchorIds = selectedAnchors.map(anchor => anchor.id).join('');
  console.log(anchorIds);
};



</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
}

.main-container {
  position: relative;
  text-align: center;
}

.page-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  background-color: #ffffff;
}

#user_logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.text-container {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%, 0);
  width: 100%;
  text-align: center;
}

#phone {
  display: block;
  color: grey;
}

#gesture_pwd {
  display: block;
  color: grey;
}

.gesture-container {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #3ea1e5;
  position: relative;
}

#change_login {
  position: absolute;
  bottom: 0;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, 0);
  color: #3ea1e5;
}
</style>